<template>
    <QilinUploadFile v-model:uploadFileConfig="uploadFileConfig"
        :fileList='[
            {
                fileName: "/profile/upload/2024/04/16/微信图片_20240401163930_20240416172625A002.png",
                newFileName: "微信图片_20240401163930_20240416172625A002.png",
                originalFilename: "微信图片_20240401163930.png",
                url: "https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ]'
        @success="(value)=>{
            console.log(value);
        }"
        @actionSuccess="(res,file)=>{
            uploadFileConfig.fileList.push({...res[uploadFileConfig.fileOptions?.responseDataName || 'data'],raw:file.raw});
        }"
    ></QilinUploadFile>
    <br/>
    <QilinUploadFile v-model:uploadFileConfig="uploadFileConfig1"
        :fileList='[
            {
                fileName: "/profile/upload/2024/04/16/微信图片_20240401163930_20240416172625A002.png",
                newFileName: "微信图片_20240401163930_20240416172625A002.png",
                originalFilename: "微信图片_20240401163930.png",
                name: "微信图片_20240401163930.png",
                url: "https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
            }
        ]'
        @success="(value)=>{
            console.log(value);
        }"
    ></QilinUploadFile>
    <br/>
    <QilinUploadFile v-model:uploadFileConfig="uploadFileConfig2"
        @success="(value)=>{
            console.log(value);
        }"
    ></QilinUploadFile>
    <br/>
    <QilinUploadFile v-model:uploadFileConfig="uploadFileConfig3"
        @success="(value)=>{
            // console.log(value);
            getUploadFileData(value);
            // console.log(uploadFileConfig3.fileList,'------------');
        }"
    ></QilinUploadFile>
</template>

<script setup>
import {reactive,ref} from "vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
// 定义接收文件的变量数组
let fileUrls=ref([]);


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
const getUploadFileData = (fileList,fileName = "file")=>{
    // console.log(fileList,"=====");
    fileList.forEach((item)=>{
        if(!item.fileName){ //过滤未上传的文件
            let formData = new FormData();
            formData.append(fileName,item.raw);
            fetch("http://36.134.22.190:8061/common/upload",{
                headers:{
                    Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJUY1h3SHUxZzVQaTZ5M2JJTGI5OEQ5b01RV21zZFNsOSIsInVzZXJJZCI6MX0.rasdIZUzyc2-PotmppmvxFUWIXWmrxYZMEzA8ywGZeI"
                },
                method:"post",
                body:formData
            }).then((response)=>{
                // console.log(response);
                return response.json();
            }).then((res)=>{
                // console.log(res);
                Object.keys(res.data).forEach((key)=>{
                    item[key] = res.data[key];
                    Reflect.deleteProperty(item,"raw");
                });
            });
        }
    });
};

const uploadFileConfig=reactive({
    action:"http://36.134.22.190:8081/common/upload",
    headers:{
        Authorization:"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoyNDIiLCJyblN0ciI6InUybGFpN1ZpblZlcGJnVldrSkg2cEtrUlFCTFE0aU4wIiwidXNlcklkIjoyNDJ9.cDAuYpoatac86balVqxq7ZC3kJbMIgElnP_Sz9OSi_M"
    },
    autoUpload:true,
    limit:3,
    fileType:["png","jpg","jpeg","gif"],
    fileList:[],
    fileOptions:{
        serverName:"originalFilename"
    },
    uploadText:"拖入此处上传或点击上传--指定action上传方式",
    previewFn:(item)=>{
        console.log(item);
    },
    downloadFn:(item)=>{
        console.log(item);
    }
});
const uploadFileConfig1=reactive({
    limit:1,
    fileType:["png","jpg","jpeg","gif"],
    uploadText:"拖入此处上传或点击上传--无action上传方式",
    fileList:[],
    fileOptions:{
        serverName:"name"
    },
    previewFn:(item)=>{
        console.log(item);
    },
    downloadFn:(item)=>{
        console.log(item);
    }
});
const uploadFileConfig2=reactive({
    limit:1,
    fileType:["mp4","png","jpg","jpeg","gif"],
    fileTypeText:"（支持mp4等文件格式）",
    uploadText:"拖入此处上传或点击上传--无action上传方式",
    fileList:[],
    fileOptions:{
        serverName:"name"
    },
    previewFn:(item)=>{
        console.log(item);
    },
    downloadFn:(item)=>{
        console.log(item);
    }
});
const uploadFileConfig3=reactive({
    limit:1,
    fileType:["mp4","png","jpg","jpeg","gif"],
    fileTypeText:"（支持mp4等文件格式）",
    uploadText:"自定义上传（手动调用后台接口）--无action上传方式",
    fileList:[],
    fileOptions:{
        serverName:"name"
    },
    previewFn:(item)=>{
        console.log(item);
    },
    downloadFn:(item)=>{
        console.log(item);
    }
});


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
